<template>
	<el-drawer title="在线考评" v-model="visible" :size="800" direction="ltr" destroy-on-close @closed="$emit('closed')">
		<el-container>
			<el-main v-if="step == 1">
				<div class="u-m-t-30">
					<el-form :model="FormData" :rules="rules" :disabled="mode=='show'" ref="dialogForm"
						label-width="80px">
						<el-form-item label="模板" prop="">
							<el-select v-model="ptemp">
								<el-option v-for="(item,index) in ptempList" :key="index" :label="item.name"
									:value="item.id">{{item.name}}</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="巡查标准" prop="">
							<span v-for="(item,index) in cateInfo.one" :key="index"
								:class="cate.one == item.id ? 'active':''" class="oneItem u-m-r-10"
								@click="onCateItem('one',item)">
								{{item.name}}
							</span>
						</el-form-item>
						<el-form-item label="巡查项" prop="">
							<span v-for="(item,index) in cateInfo.two" :key="index"
								:class="cate.two == item.id ? 'active':''" class="oneItem u-m-r-10"
								@click="onCateItem('two',item)">
								{{item.name}}
							</span>
						</el-form-item>
						<el-form-item label="巡查问题" prop="">
							<div v-for="(item,index) in cateInfo.three" :key="index" style="width:100%"
								class="u-m-b-20">
								<el-card>
									<div>
										{{item.name}}
									</div>
									<div class="u-m-t-10">
										<sc-upload title="上传图片"></sc-upload>
									</div>
									<div class="u-m-t-10">
										<el-input type="textarea" placeholder="请输入内容"></el-input>
									</div>
									<div class="u-m-t-10 u-flex u-row-between">
										<div>
											得分: <span class="u-error">{{item.soce || 0}}</span>分
										</div>
										<div>
											<el-radio-group v-model="item.soce" class="ml-4">
												<el-radio label="2" size="large">合格</el-radio>
												<el-radio label="0" size="large">不合格</el-radio>
												<el-radio label="2" size="large">不适用</el-radio>
											</el-radio-group>
										</div>
									</div>
								</el-card>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</el-main>
			<el-main v-if="step == 2">
				<el-card>
					<el-row class="u-text-center u-primary">
						<el-col :span="6">
							<p class="u-font-20">
								12
							</p>
							<div class="u-m-t-10 u-info">
								合格数
							</div>
						</el-col>
						<el-col :span="6">
							<p class="u-font-20">
								0
							</p>
							<div class="u-m-t-10 u-info">
								不合格数
							</div>
						</el-col>
						<el-col :span="6">
							<p class="u-font-20">
								0
							</p>
							<div class="u-m-t-10 u-info">
								不适用数
							</div>
						</el-col>
						<el-col :span="6">
							<p class="u-font-20 u-error">
								100
							</p>
							<div class="u-m-t-10 u-info">
								得分
							</div>
						</el-col>
					</el-row>
				</el-card>
				<div class="u-m-t-20">
					<div class="u-font-16 u-font-bold u-m-b-10">抄送</div>
					<Users multiple v-model="FormData.users"></Users>
				</div>
				<div class="u-font-16 u-font-bold u-m-t-20">
					<!-- <div class="u-font-16 u-font-bold u-m-b-10">是否需要整改</div> -->
					<el-switch v-model="FormData.isNeed" active-text="需要整改" inactive-text="不需要整改" />
				</div>
				<div v-if="FormData.isNeed" class="u-font-16 u-font-bold u-m-t-20">
					<div class="u-font-16 u-font-bold u-m-b-10">整改人</div>
					<Users v-model="FormData.gusers" :defaultValue="FormData.users"></Users>
				</div>
			</el-main>
			<el-footer v-if="step == 1">
				<div class="u-flex u-row-right">
					<el-button type="" @click="visible = false">取消</el-button>
					<el-button type="primary" @click="onNext">下一步</el-button>
				</div>
			</el-footer>
			<el-footer v-if="step == 2">
				<div class="u-flex u-row-right">
					<el-button type="" @click="step = 1">上一步</el-button>
					<el-button type="primary" @click="onNext">提交</el-button>
				</div>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	import scVideo from '@/components/scVideo'
	import Rocker from './Rocker'
	export default {
		emits: ['success', 'closed'],
		components: {
			scVideo,
			Rocker
		},
		data() {
			return {
				visible: false,
				step: 1,
				info: {},
				isSaveing: false,
				spin: {
					channel: "",
					direction: "",
					id: "",
					speed: ""
				},
				date: {},
				ptemp: null,
				cate: {
					one: null,
					two: null,
					three: null
				},
				FormData: {
					users:[],
					isNeed: false
				},
				//验证规则
				rules: {
					date: [{
						required: true,
						message: '请选择回放时间'
					}],
				},
				ptempList: [],
				cateInfo: {
					one: [],
					two: [],
					three: []
				},
				pages: {
					page: 1,
					pagesize: 100
				}
			}
		},
		watch: {
			'ptemp'() {
				this.cateInfo.one = []
				this.cateInfo.two = []
				this.cateInfo.three = []
				this.getCateInfo('ptemp',this.ptemp)
			},
			// 'cate.one'() {
			// 	this.cateInfo.two = []
			// 	this.cateInfo.three = []
			// 	//this.setPtempData('one')
			// },
			// 'cate.two'() {
			// 	//this.setPtempData('two')
			// }
		},
		created() {
			this.getPtempList()
		},
		methods: {
			onNext() {
				console.log(23444)
				this.step = 2
			},
			onCateItem(cate, item) {
				console.log(item)
				if (cate == 'one') {
					this.cate.one = item.id
					this.cateInfo.two = []
					this.cateInfo.three = []
					this.getCateInfo('one',item.id)
				}
				if (cate == 'two') {
					this.cate.two = item.id
					this.cateInfo.three = []
					this.getCateInfo('two',item.id)
					// if (item.children.length) {
					// 	this.cateInfo.three = item.children
					// }
				}
			},
			setPtempData() {
				this.getCateInfo('ptemp',this.ptemp)
				// if (option == 'ptemp' && this.ptempList.length) {
				// 	this.ptempList.forEach(item => {
				// 		if (item.id == this.ptemp) {
				// 			if (item.children && item.children.length) {
				// 				this.cate.one = item.children[0].id
				// 				this.getCateInfo('one',this.cate.one)
				// 				item.children.forEach(item1 => {
				// 					if (item1.children && item1.children.length) {
				// 						this.cateInfo.two = item1.children
				// 						this.cate.two = item1.children[0].id
				// 						this.getCateInfo('two',this.cate.two)
				// 						// item1.children.forEach(item2 => {
				// 						// 	if (item2.children && item2.children.length) {
				// 						// 		this.cateInfo.three = item2.children
				// 						// 	}
				// 						// })
				// 					}
				// 				})
				// 			}
				// 		}
				// 	})
				// 	console.log(999,this.cateInfo)
				// }
				// if (option == 'one' && this.cateInfo.one.length) {
				// 	this.cateInfo.one.forEach(item1 => {
				// 		if (item1.children && item1.children.length) {
				// 			this.cateInfo.two = item1.children
				// 			this.cate.two = item1.children[0].id
				// 			item1.children.forEach(item2 => {
				// 				if (item2.children && item2.children.length) {
				// 					this.cateInfo.three = item2.children
				// 				}
				// 			})
				// 		}
				// 	})
				// }
				// if (option == 'two' && this.cateInfo.two.length) {
				// 	this.cateInfo.two.forEach(item2 => {
				// 		if (item2.children && item2.children.length) {
				// 			this.cateInfo.three = item2.children
				// 		}
				// 	})
				// }
			},
			async getPtempList() {
				const res = await this.$API.api.ptemp.list.post(this.pages)
				this.ptempList = res.data.datas
				if (this.ptempList.length) {
					this.ptemp = this.ptempList[0].id
					//this.cateInfo.one = this.ptempList[0].children
					// if (this.ptempList[0].children.length) {
					// 	this.cate.one = this.ptempList[0].children[0].id
					// }
					// if (this.ptempList[0].children[0].children.length) {
					// 	this.cate.two = this.ptempList[0].children[0].children[0].id
					// }
					//this.setPtempData('ptemp')
				}

				console.log(1119, this.cate.two)
				//this.getCateInfo()
			},
			async getCateInfo(type,id){
				const res = await this.$API.api.ptemp.get.post({id:id})
				if(type == 'ptemp'){
					this.cateInfo.one = res.data.children
					// if(this.cateInfo.one.length){
					// 	this.cate.one = this.cateInfo.one[0].id
					// }
				}
				if(type == 'one'){
					this.cateInfo.two = res.data.children
					// if(this.cateInfo.two.length){
					// 	this.cate.two = this.cateInfo.two[0].id
					// }
				}
				if(type == 'two'){
					this.cateInfo.three = res.data.children
				}
			},
			changeDate(e) {
				console.log(e)
				this.FormData.start = e[0]
				this.FormData.end = e[1]
			},
			//表单提交方法
			async submit() {
				var valid = await this.$refs.dialogForm.validate().catch(() => {})
				if (!valid) {
					return false
				}
				this.isSaveing = true
				this.info.path = ''
				let data = {
					channel: this.info.channel,
					inDevice: this.FormData.inDevice,
					id: this.info.device,
					protocol: this.FormData.protocol,
					start: this.FormData.start,
					end: this.FormData.end
				}
				const res = await this.$API.api.cam.playback.post(data)

				this.isSaveing = false;
				if (res.code == 200) {
					this.info.path = res.data
					console.log(1111, res)
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			},
			open() {
				this.visible = true
			},
			//表单注入数据
			setData(data) {
				this.visible = true
				console.log(data)
				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				Object.assign(this.info, data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oneItem {
		border: 1px solid #ddd;
		border-radius: 3px;
		padding: 6px 10px;
		cursor: pointer;
		line-height: 100%;
		font-size: 12px;

		&:hover {
			border: 1px solid var(--el-color-primary);
		}

		&.active {
			border: 1px solid var(--el-color-primary);
			background: var(--el-color-primary);
			color: #fff;
		}
	}
</style>
